<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="./css/main.css" rel="stylesheet">
<title>用户注册</title>
</head>
<body>
	<div class="container">
		<div class="panel panel-default col-md-offset-3 col-md-6 register-panel">
			<div class="h2 text-center">用户注册</div>
			<div class="pannel-body">
				<form class="form-horizontal" action="./uploadMulti.do" method="post"
					enctype="multipart/form-data">
					<div class="form-group">
						<label class="control-label col-md-4">用户名</label>
						<div class="col-md-6">
							<input type="text" class="form-control" name="username"/>
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-md-4">密码</label>
						<div class="col-md-6">
							<input type="password" class="form-control" name="pwd"/>
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-md-4">重新输入密码</label>
						<div class="col-md-6">
							<input type="password" class="form-control"/>
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-md-4">性别</label>
						<div class="col-md-6">
							<label class="radio-inline">
								<input type="radio" name="sex" value="M">男
							</label>
							<label class="radio-inline">
								<input type="radio" name="sex" value="F">女
							</label>
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-md-4">上传头像</label>
						<div class="col-md-4">
							<input type="file" name="file" class="form-control" id="filechooser">
						</div>
						<!--<div class="col-md-4 img-previewer">
							<img alt="图片预览" height="160" width="160" id="previewer"/>
						</div>-->
					</div>
					<div class="form-group">
						<label class="control-label col-md-4">头像预览</label>
						<div class="col-md-4 img-previewer">
							<img alt="图片预览" height="160" width="160" id="previewer"/>
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-md-4">兴趣爱好</label>
						
						<select multiple name="interests" class="col-md-6">
							<option value="books">看书</option>
							<option value="balls">打球</option>
							<option value="music">音乐</option>
						</select>
						
					</div>
					<div class="form-group">
						<label class="control-label col-md-4">请输入验证码</label>
					
					   	<input type="text" name="checkCode"/>
					    <img alt="验证码" id="checkCode"  src="ImageServlet"/>
					    <a href="#" onclick="reImg();">看不清楚</a>
				 	</div>
					<div class="form-group">
						<div class="col-md-offset-4 col-md-4">
							<button type="submit" class="btn btn-primary btn-block">提交</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		//用于显示头像的缩略图
		var filechooser = document.getElementById('filechooser');
		var previewer = document.getElementById('previewer');
		filechooser.onchange = function() {
			var file = this.files[0];
			var reader = new FileReader();
			reader.onload = function() {
				previewer.src = this.result;
			}
			reader.readAsDataURL(file);
		}
		/*  html+js实现html中一个图片刷新但是整个页面不刷新，或者是验证码刷新。
			不使用jsp，不使用ajax，不使用js框架。
			【原理】
			当一个<img>的src改变时，页面会自动刷新这个<img>
		*/
		function reImg(){  
            var img = document.getElementById("checkCode");  
            img.src = "ImageServlet?rnd=" + Math.random();  
        }
	</script>
</body>
</html>